<template>
  <div>
    <div class="system__icon" v-if="modelValue" @click="toggle">
      <component :is="visibleIcon"></component>
    </div>
    <div class="system__icon" v-else @click="toggle">
      <component :is="hiddenIcon"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
const modelValue = defineModel<boolean>('modelValue');
const toggle = () => {
  modelValue.value = !modelValue.value;
};
defineProps<{
  visibleIcon: any;
  hiddenIcon: any;
}>();
</script>

<style lang="scss" scoped></style>
